<template>
  <div class="login_content">
    <!-- color: String类型。默认’#dedede’。粒子颜色。
      particleOpacity: Number类型。默认0.7。粒子透明度。
      particlesNumber: Number类型。默认80。粒子数量。
      shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
      particleSize: Number类型。默认80。单个粒子大小。
      linesColor: String类型。默认’#dedede’。线条颜色。
      linesWidth: Number类型。默认1。线条宽度。
      lineLinked: 布尔类型。默认true。连接线是否可用。
      lineOpacity: Number类型。默认0.4。线条透明度。
      linesDistance: Number类型。默认150。线条距离。
      moveSpeed: Number类型。默认3。粒子运动速度。
      hoverEffect: 布尔类型。默认true。是否有hover特效。
      hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, + “bubble”。
      clickEffect: 布尔类型。默认true。是否有click特效。
      clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”。
      -->
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="50"
      shapeType="star"
      :particleSize="4"
      linesColor="#f60"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.5"
      :linesDistance="300"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>

    <div class="login_btn">
      <div class="login_logo">
        <img class="logo_img" src="../../assets/login/td.jpg" alt="" />
        <span>知识收集系统</span>
      </div>
      <div>
        <el-button
          link
          @click="hintBtn"
          >访客</el-button
        >
      </div>
    </div>
    <div class="login_box">
      <div class="login-title"><span>系统管理平台</span></div>
      <div class="box">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          :hide-required-asterisk="true"
          label-width="70px"
          class="demo-ruleForm"
        >
          <el-form-item label="账户" prop="name">
            <el-input v-model="form.name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <div class="tip">
          </div>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="register-text">
        <span
          >没有账号？去<span class="register" @click="register"
            >注册>></span
          ></span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import local from "@/utils/local";
import { _login } from "@/api/login/login";
// 手机号验证
const checkPhoneFn = (rule: any, value: string, callback: any) => {
  if (value != "admin") {
    const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/;
    const reg1 = /[a-zA-Z0-9_]{4,16}/;
    if (!value) return callback(new Error("请输入手机号/英文姓名"));
    if (!reg.test(value) && !reg1.test(value))
      return callback(new Error("请输入正确的手机号/英文姓名"));
    callback();
  }
  if (value == "admin") {
    callback();
  }
};
export default defineComponent({
  setup() {
    const ruleFormRef = ref<FormInstance>();
    // const route=useRoute()
    const router = useRouter();
    const state = reactive({
      form: {
        name: "liaoyanglinceshi",
        password: "1234567",
      } as any,
      rules: {
        name: [
          {
            validator: checkPhoneFn,
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "请输入6至16位密码",
            trigger: "blur",
          },
        ],
      },
      submitForm: async (formEl: FormInstance | undefined) => {
        try {
          // 事件处理程序
          if (!formEl) return;
          await formEl.validate(async (valid) => {
            if (valid) {
              const res: any = await _login({
                username: state.form.name,
                password: state.form.password,
                grantType: "password",
                platform: "FRONT",
              });
              console.log(res);
              if (res.code === 10000) {
                ElMessage({
                  message: res.message,
                  type: "success",
                });
                local.set("tokenObj", JSON.stringify(res.data));
                router.push("/");
              } else {
                ElMessage({
                  message: res.message,
                  type: "error",
                });
              }
            } else {
              ElMessage.error("请输入正确的账号和密码");
            }
          });
        } catch (err) {
          // 错误事件处理程序（报错时执行）
          console.error(err);
        } finally {
          // 事件处理程序（报错或正常都会执行）
        }
      },
      resetForm: (formEl: FormInstance | undefined) => {
        try {
          // 事件处理程序
          if (!formEl) return;
          formEl.resetFields();
        } catch (err) {
          // 错误事件处理程序（报错时执行）
          console.error(err);
        } finally {
          // 事件处理程序（报错或正常都会执行）
        }
      },
      hintBtn: () => {
        ElMessage({
          message: "访客",
          type: "warning",
        });
      },
      register: () => {
        router.push("/register");
      },
    });
    onMounted(()=>{
      local.remove("tokenObj");
    })
    return {
      ...toRefs(state),
      ruleFormRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.login_content {
  height: 100%;
  width: 100%;
  background-image: url("../../assets/login/wtt.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .lizi {
    // background-color: #006699;
    // z-index: 999999;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .login_btn {
    display: flex;
    justify-content: space-between;
    height: 80px;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    top: 0;

    .login_logo {
      font-size: 30px;
      color: #484891;
      display: flex;
      align-items: center;
      .logo_img {
        width: 80px;
        margin-right: 40px;
      }
    }
    .el-button--text {
      font-size: 20px !important;
      color: #484891;
    }
  }
  .login_box {
    width: 500px;
    height: 300px;
    background: #0490d648;
    display: flex;
    flex-direction: column;
    justify-content: right;
    box-sizing: border-box;
    border: 1px solid #006699;
    border-radius: 5%;
    position: fixed;
    top: 30%;
    left: 60%;
    .box {
      width: 500px;
      height: 300px;
      background-color: transparent;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      :deep(.el-form-item__label) {
        color: #fff !important;
        font-size: 18px;
      }
      :deep(.el-input__wrapper) {
        width: 250px !important;
      }
    }
    .login-title {
      width: 100%;
      line-height: 60px;
      color: #fff;
      font-weight: 500;
      font-size: 28px;
      padding-left: 20px;
    }
    .register-text {
      width: 100%;
      line-height: 40px;
      color: #fff;
      display: flex;
      justify-content: center;
      .register {
        color: #f60;
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
  .login_main {
    background-image: -webkit-linear-gradient(
      bottom,
      rgb(155, 9, 247),
      rgb(24, 228, 116),
      rgb(20, 11, 255)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 48px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 250px;
  }
  .tip {
    width: 100%;
    text-align: center;
    margin: 10px 0;
    color: #ccc;
  }
}
</style>
